<template>
  <xr-popup ref="popup" :type="popupType">
    <view class="select-book">
      <view class="title">
        教材选择
        <image class="img" src="https://file.bendiclass.com/oss/upload/image/png/627215bcb7f0f846829572864ee41d73.png" @click="closePopup"></image>
      </view>
      <view class="select-box">
        <view class="list-title f16">年级</view>
        <view class="list-box flex flex-between">
          <view class="list-item" v-for="(item, index) in gradeList" :key="index" :class="curBookInfo.grade === item.type ? 'item-active' : ''" @click="selectSubject(item, 1)">
            {{item.typeName}}
          </view>
        </view>
        <view class="list-title">学期</view>
        <view class="list-box flex">
          <view class="list-item" v-for="(item, index) in schoolList" :key="index" :class="curBookInfo.schoolYear === item.type ? 'item-active' : ''" @click="selectSubject(item, 2)">
            <!-- <text v-if="curBookInfo"></text> -->
            {{item.typeName}}
          </view>
        </view>
        <view class="select-but" @click="getQueryWords">确认</view>
      </view>
    </view>
  </xr-popup>
</template>

<script>

export default {
  name: 'SelectInfoPopup',
  props: {
    popupType: {
      type: String,
      delete: 'bottom'
    }
  },
  data () {
    return {
      gradeList: [
        { type: 'THIRD_GRADE', typeName: '三年级' },
        { type: 'FOURTH_GRADE', typeName: '四年级' },
        { type: 'FIFTH_GRADE', typeName: '五年级' },
        { type: 'SIXTH_GRADE', typeName: '六年级' }
      ],
      schoolList: [
        { type: 'LAST_SEMESTER', typeName: '上学期' },
        { type: 'FOURTH_GRADE', typeName: '下学期' }
      ],
      curBookInfo: {
        grade: 'THIRD_GRADE',
        gradeName: '',
        schoolYear: '',
        schoolName: ''
      }
    }
  },
  methods: {
    open () {
      console.log(321321)
      this.$refs.popup.open()
    },
    selectSubject (item, type) {
      switch (type) {
        case 1:
          this.curBookInfo.grade = item.type
          this.curBookInfo.gradeName = item.typeName
          break
        case 2:
          this.curBookInfo.schoolYear = item.type
          this.curBookInfo.schoolName = item.typeName
          break
      }
    },
    getQueryWords () {

    }
  }
}
</script>

<style lang="scss" scoped>
.select-book {
  border-top-left-radius: 36rpx;
  border-top-right-radius: 36rpx;
  padding: 0 30rpx 30rpx;
  background: #fff;
  .title {
    position: relative;
    padding: 30rpx 0;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    text-align: center;
    .img {
      position: absolute;
      right: 0;
      top: 26rpx;
      width: 54rpx;
      height: 54rpx;
    }
  }
  .select-box {
    width: 100%;
    .list-title {
      font-weight: 600;
      color: #333333;
    }
    .list-box {
      flex-wrap: wrap;
      margin: 28rpx 0;
      .list-item {
        width: 162rpx;
        padding: 18rpx 0rpx;
        margin-right: 8rpx;
        border-radius: 36rpx;
        text-align: center;
        font-size: 28rpx;
        font-weight: 400;
        color: #333;
        text-align: center;
        background: #f7f8f9;
      }
      .item-active {
        color: #4989fe;
        background: #e5eeff;
      }
    }
  }
}
.select-but {
  width: 100%;
  margin: 48rpx 0 0rpx;
  padding: 26rpx 0;
  border-radius: 60rpx;
  text-align: center;
  color: #fff;
  font-size: 36rpx;
  background: #4989fe;
}
</style>
